<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎访问小兔儿鲜网</title>
    <meta name="description" content="专业的在线电商网">
    <!-- 网站简介 -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="stylesheet" href="css/comoon公共样式.css">
    <!-- head 和footer公共样式 -->
    <link rel="stylesheet" href="css/base初始化.css">
    <!-- 初始化 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- index首页样式 -->
    <link rel="stylesheet" href="css/list.css">
    <!-- 引入list 商业品页面的  -->
</head>

<body>

    <!-- 复制公共样式的head,footer -->
    <!-- head  头部的 -->
    <!-- head  S -->
    <div class="head">
        <div class="head_nav">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#" class="iphone"></a></li>
            </ul>
        </div>
    </div>
    <!-- head E -->

    <!-- top顶部导航 S -->
    <div class="top w">
        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="top_nav">
            <ul>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
            </ul>
            <div class="search">
                <div class="search_icon">
                    <i></i>
                    <div class="txt">
                        <span>搜一搜</span>
                    </div>
                    <div class="shop">
                        <span>99+</span>
                        <!-- 记住这个语法,直接定义一个sapan ,然后定义样式即可 -->
                        <!-- 布局始终是盒子套盒子!!!!!!!!!!!!1,摆到正确的位子即可! -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- top顶部导航 E -->


    <!--  背景及banner 轮播图 start -->
    <div class="banner_bg">
        <!-- 背景的颜色 -->


        <div class=" banner w">

            <!-- 把里面的内容套在背景色里，版心中 -->
            <div class="nav">
                <ul>
                    <!-- 记住这个语法 ! 文字导航栏靠近右边一个>  直接a 里面嵌套一个span
                     &gt; 即可!!!!!!!
                    -->
                    <li><a href="#">生鲜 水果 蔬菜<span>&gt;</span></span></a></li>
                    <li><a href="#">电器 床品 四件套 被枕<span>&gt;</span></a></li>
                    <li><a href="#">生鲜 水果 蔬菜<span>&gt;</span></span></a></li>
                    <li><a href="#">电器 床品 四件套 被枕<span>&gt;</span></a></li>
                    <li><a href="#">生鲜 水果 蔬菜<span>&gt;</span></span></a></li>
                    <li><a href="#">电器 床品 四件套 被枕<span>&gt;</span></a></li>
                    <li><a href="#">生鲜 水果 蔬菜<span>&gt;</span></span></a></li>
                    <li><a href="#">电器 床品 四件套 被枕<span>&gt;</span></a></li>
                    <li><a href="#">生鲜 水果 蔬菜<span>&gt;</span></span></a></li>
                    <li><a href="#">电器 床品 四件套 被枕<span>&gt;</span></a></li>
            </div>
        </div>
    </div>
    <!-- 背景及banner 轮播图 start -->


    <!-- News 新鲜好物  start -->
    <div class="w">
        <!-- 头部标题 -->
        <div class="title-hd">
            <div class="hd_gy">
                <h3 class="fl">新鲜好物</h3>
                <p class="fl">新鲜出炉 出品可靠</p>
                <a href="#" class="fr">查看全部 <span>&gt;</span></a>
            </div>
        </div>
        <div class="list">
            <ul>
                <li>
                    <a href="#"><img src="./uploads/new_goods_3.jpg" alt=""></a>
                    <div class="txt">

                        <h3>睿米无线吸尘器F8睿米无线吸....</h3>
                        <div class="price">
                            <span>￥8888</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="./uploads/new_goods_1.jpg" alt=""></a>
                    <div class="txt">

                        <h3>睿米无线吸尘器F8睿米无线吸....</h3>
                        <div class="price">
                            <span>￥8888</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="./uploads/new_goods_2.jpg" alt=""></a>
                    <div class="txt">

                        <h3>睿米无线吸尘器F8睿米无线吸....</h3>
                        <div class="price">
                            <span>￥8888</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="./uploads/new_goods_4.jpg" alt=""></a>
                    <div class="txt">

                        <h3>睿米无线吸尘器F8睿米无线吸....</h3>
                        <div class="price">
                            <span>￥8888</span>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- News 新鲜好物  end -->



        <!-- recommend 人气推荐 start -->
        <div class="w">
            <!-- 头部标题 -->
            <div class="title-hd">
                <div class="hd_gy">
                    <h3 class="fl">人气推荐</h3>
                    <p class="fl">新鲜出炉 出品可靠</p>
                    <a href="#" class="fr">查看全部 <span>&gt;</span></a>
                </div>
            </div>
            <div class="list">
                <ul>
                    <li>
                        <a href="#"><img src="./uploads/popular_1.jpg" alt=""></a>
                        <div class="txt">

                            <h3>特惠推荐</h3>
                            <div class="price_2">
                                <span>我猜的到 你的需要</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img src="./uploads/popular_2.jpg" alt=""></a>
                        <div class="txt">

                            <h3>特惠推荐</h3>
                            <div class="price_2">
                                <span>我猜的到 你的需要</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img src="./uploads/popular_3.jpg" alt=""></a>
                        <div class="txt">

                            <h3>特惠推荐</h3>
                            <div class="price_2">
                                <span>我猜的到 你的需要</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img src="./uploads/popular_4.jpg" alt=""></a>
                        <div class="txt">

                            <h3>特惠推荐</h3>
                            <div class="price_2">
                                <span>我猜的到 你的需要</span>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <!-- recommend 人气推荐 end-->

        <div class="separation">
            <!-- 中间空余的分割 separation -->
        </div>


        <!-- fresh  生鲜 start -->
        <div class="fresh">
            <div class="ad_fl">
                <!-- fl 左边浮动广告图片 -->
                <img src="./uploads/fresh_goods_cover.png" alt="">
            </div>

            <div class="ad_fr">
                <ul>
                    <li><a href="#"><img src="./uploads/fresh_goods_3.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>

                        <!-- 这种过度动画效果,直接用一个a链接来做
                            无需在搭建一个盒子
                            因为查看更多,肯定是一个链接点进去
                            -->
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>

                    <li><a href="#"><img src="./uploads/fresh_goods_2.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                    <li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                    <li><a href="#"><img src="./uploads/fresh_goods_4.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                    <li><a href="#"><img src="./uploads/fresh_goods_5.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                    <li><a href="#"><img src="./uploads/fresh_goods_6.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                    <li><a href="#"><img src="./uploads/fresh_goods_7.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                    <li><a href="#"><img src="./uploads/fresh_goods_8.jpg" alt=""></a>
                        <h5>红功夫红功夫红功夫红功夫 麻辣小龙虾1.5kg4-6钱/25-32只</h5>
                        <span>火锅食材</span>
                        <p>￥999</p>
                        <a href="#" class="mask">
                            <p>找相似</p>
                            <p>查看更多宝贝</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- fresh  生鲜 end -->


    <!--   News最新专题 start -->
    <div class="News">
        <div class="News_hd w">
            <h3 class="fl">最新专题</h3>
            <p class="fl">新鲜出炉 出品可靠</p>
            <a href="#" class="fr">查看全部 <span>&gt;</span></a>
        </div>
        <div class="News_bd w">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic_goods_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>吃这些美食才不算辜负自己</h4>
                            <p>餐厨起居洗护好物</p>
                            <span>￥99.9起</span>
                        </div>
                        <div class="txt_item">
                            <span><i>999+</i></span>
                            <span><i>999+</i></span>
                            <span><i>999+</i></span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic_goods_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>吃这些美食才不算辜负自己</h4>
                            <p>餐厨起居洗护好物</p>
                            <span>￥99.9起</span>
                        </div>
                        <div class="txt_item">
                            <span><i>999+</i></span>
                            <span><i>999+</i></span>
                            <span><i>999+</i></span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic_goods_1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>吃这些美食才不算辜负自己</h4>
                            <p>餐厨起居洗护好物</p>
                            <span>￥99.9起</span>
                        </div>
                        <div class="txt_item">
                            <span><i>999+</i></span>
                            <span><i>999+</i></span>
                            <span><i>999+</i></span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    </div>
    
    <!--   News最新专题 start -->


    
  <!-- 引入公共样式 -->

    <!--  footer 底部公共样式 start -->
    <footer>
        <div class="box w">
            <ul>
                <li>
                    <h3>客户服务</h3>
                    <a href="#">
                        <div class="icon">
                            <i>
                                <span></span>
                                <p>在线客服</p>
                            </i>
                            <i>
                                <span></span>
                                <p>问题反馈</p>
                            </i>

                        </div>
                    </a>
                </li>
                <li>
                    <h3>客户服务</h3>
                    <a href="#">
                        <div class="icon">
                            <i>
                                <span></span>
                                <p>在线客服</p>
                            </i>
                            <i>
                                <span></span>
                                <p>问题反馈</p>
                            </i>
                        </div>
                    </a>
                </li>
                <li>
                    <div class="download">
                        <span>下载APP</span>
                        <div class="icon_item">
                            <i><img src="./uploads/qrcode.png" alt="">
                            </i>
                            <div class="qrcode">
                                <p>扫描二维码</p>
                                <p>立马下载APP</p>
                                <div class="btn">
                                    <a href="#">下载页面</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
               <li> <div class="connect">
                <span>服务热线</span>
                <h4>4000-000-9000 </h4>
                <p>周一之周日 8:00-18:00</p>
            
            </li>
            </ul>
        </div>
    </footer>

    <div class="footer">
        <div class="hd w">
            <ul>
                <li>
                    <div class="hd_icon">
                        <i></i>
                        <!-- 如果发现引入的字体图标太大了，肯定是盒子设置太大了 -->
                        <span>价格亲民</span>
                    </div>
                </li>
                <li>
                    <div class="hd_icon">
                        <i></i>
                        <span>价格亲民</span>
                    </div>
                </li>
                <li>
                    <div class="hd_icon">
                        <i></i>
                        <span>价格亲民</span>
                    </div>
                </li>
          </ul>
        </div>
        <div class="footer_nav">
            <p>
                <a href="#">关于我们</a>
                <span>|</span> <a href="#">帮助中心</a>
                <span>|</span> <a href="#">售后服务</a>
                <span>|</span> <a href="#">配送与验收</a>
                <span>|</span> <a href="#">商务合作</a>
                <span>|</span> <a href="#">搜索推荐</a>
                <span>|</span> <a href="#">友情链接</a>
                <!-- 直接一个竖线| 加一个a链接即可 无需再书写boder 边框了，这样的书写简洁 -->
            </p>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>

<!-- 底部footer end ！！ -->


</body>